<template>
	<view class="page">
		<view class="goods">
			<view v-for="item in lists" :key="item._id" class="item-container   item">
				<view class="left">
					<view>
						<image :src="item.goods_thumb.url" class="item-image"></image>
					</view>
				</view>
				<view class="right">
					<view class="item-name">
						<text>{{ item.name }}</text>
					</view>
					<view class="item-score">
						<text>{{ item.need_score }}</text>
						<text>积分</text>
					</view>
					<view class="item-remaining">
						<text>剩余{{item.remain_count}}个</text>
					</view>
					<view class="exchange-button" @click="dh(item)">
						<text>兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const db = uniCloud.database()
	let mall_db = db.collection('opendb-mall-goods');
	export default {
		data() {
			return {
				current_user_info: {},
				lists: []
			}
		},
		async onLoad() {
			this.current_user_info = await uniCloud.getCurrentUserInfo()
			await this.load_banner_img();
			// await this.init_user_score();
		},
		methods: {
			async dh(item) {
				// 先检查积分余额
				const user_balance = await db.collection('uni-id-scores').where({
						user_id: this.current_user_info.uid,
						type: 1
					}).groupBy('user_id')
					.groupField('sum(score) as all_score').orderBy('emission_reduction')
					.get({
						getOne: true
					});
				console.log(user_balance.result.data);

				if (user_balance.result && user_balance.result.data && user_balance.result.data.all_score >= item
					.need_score) {
					uni.showToast({
						title: '积分足够啦',
						icon: 'none'
					});
					this.init_user_score({
						"emission_reduction": item.need_score,
						"behavior": item.name
					})
					db.collection('opendb-mall-goods').where({
						_id: item._id
					}).update({
						remain_count: item.remain_count - 1
					})
					uni.showToast({
						title: '购买成功'
					});
				} else {
					uni.showToast({
						title: '积分不够',
						icon: 'none'
					});
				}



				// 改变积分

				// 添加商品购买记录




				// await db.collection('score_dh_log').add({
				// 	user_id: this.current_user_info.uid,
				// 	shop_id: item._id
				// }).then(res => {
				// 	// 更新商品的余额
				// 	db.collection('opendb-mall-goods').where({
				// 		_id: item._id
				// 	}).update({
				// 		remain_count: item.remain_count - 1
				// 	})
				// 	// 更新用户的积分
				// 	this.init_user_score({
				// 		"emission_reduction": item.need_score,
				// 		"behavior": item.name
				// 	})
				// })
				// console.log(item);
			},
			init_user_score(value) {
				// 查询当前用户的余额
				const userRef = db.collection('uni-id-scores').where({
					user_id: this.current_user_info.uid
				}).orderBy("balance", "desc").get().then(snapshot => {
					console.log(snapshot.result.data);
					let currentBalance = 0;
					if (snapshot.result.data.length !== 0) {
						currentBalance = snapshot.result.data[0].balance;
					}
					db.collection("uni-id-scores").add({
						"user_id": this.current_user_info.uid,
						"score": value.emission_reduction,
						"type": 2,
						"balance": currentBalance - value.emission_reduction,
						"comment": value.behavior,
					});
					// }
				}).catch(error => {
					console.error('Error getting user document:', error);
				});
			},
			async load_banner_img() {
				const data = await mall_db.get()
				this.lists = data.result.data;
				// console.log(data.result.data);
			},
		}
	}
</script>
<style scoped>
	.page {
		height: 100vh;
		padding: 20px;
		background-color: #f5f5f5;
	}

	.goods {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 25px;
	}

	.left {
		margin-right: 20px;
	}

	.item-image {
		width: 150px;
		height: 150px;
		object-fit: cover;
		border-radius: 10px;
	}

	.right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: calc(100% - 170px);
		/* 150px图片宽度+20px间距 */
	}

	.item-name {
		font-size: 18px;
		font-weight: bold;
	}

	.item-score {
		color: #ff9900;
	}

	.item-remaining {
		color: #666;
	}

	.exchange-button {
		background-color: #4caf50;
		color: #fff;
		text-align: center;
		padding: 10px;
		border-radius: 5px;
		cursor: pointer;
	}
</style>